<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="./js/axios.js"></script>
<style>
    .container {
        width: 18%;
        margin-top: 200px;
        text-align: center;
    }
    .card-body{
    }
    p{
        font-size: 28px;
        font-weight: 700;
    }
    .from{
        margin-top: 35px;
    }
    .btn{
        width: 100%;
        margin-top: 35px;
    }
    .bottom{
        margin-top: 45px;
    }
    a{
        text-decoration: none;
        color: rgb(117, 117, 117);
    }
    a:hover {
        text-decoration: none;
    }
</style>
<body>
<div class="container">
    <div class="card">
        <div class="card-body">
            <p>账号注册</p>
            <div class="from">
                <form>
                    <div class="input-group mb-3 input-group-lg">
                        <input type="text" class="form-control" placeholder="请输入账号" id="usr" name="username">
                    </div>
                    <div class="input-group mb-3 input-group-lg">
                        <input type="text" class="form-control" placeholder="请输入密码" id="pas" name="password">
                    </div>
                    <button type="button" class="btn btn-success btn-lg">注册</button>
                </form>
            </div>
            <div class="bottom">
                <a href="login.html">已经有账号了！去登录</a>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    //跳转页面方法
    function pageJump(url) {
        location.href = url
    }
    //获取登录按钮dom对象，点击发送axios请求
    let register_btn = document.querySelector(".btn-success")
    //给登录按钮绑定点击事件
    register_btn.addEventListener('click',function (){
        //获取输入框的的值
        let username = document.querySelector("#usr").value
        let password = document.querySelector("#pas").value
        //js的数据对象
        let date = {
            "username": username,
            "password": password
        }
        //将数据对象转换成json数据,用于返回后端(可用可不用看情况)
        // let jsonDate =  JSON.stringify(date)
        // console.log(jsonDate)
        //请求地址
        let url = 'http://localhost:8080/my_demo/register'
        //发送axios请求
        // axios.post(url,jsonDate)
        //     .then(function (response) {
        //         //如果状态码返回200,跳转主页
        //         if (response.status==200){
        //             //location.href = "home.html"
        //         }else {
        //             alert("密码错误")
        //         }
        //     })
        //     .catch(function (error) {
        //         console.log(error);
        //     });
        axios({
            method: "post",
            url: url,
            params: date
        }).then(res => {
            //将后端响应的数据转换
            //let jsonDate = JSON.parse(res.data)
            if (res.data.code === 200){
                alert(res.data.msg)
                //调用跳转方法
                pageJump("login.html")
            } else if (res.data.code === 304){
                //清空输入框
                document.querySelector("#usr").value = ''
                document.querySelector("#pas").value = ''
                alert(res.data.msg)
            } else {
                //清空输入框
                document.querySelector("#usr").value = ''
                document.querySelector("#pas").value = ''
                alert(res.data.msg)
            }
        })
    })
</script>
</html>
</body>
</html>